<script lang="ts">
import { defineComponent, ref, onMounted, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
export default defineComponent({
    setup() {
        let router: any = useRouter();
        let route: any = useRoute();
        let mydraftjson: any = localStorage.getItem("mydraft");
        let mydraft: any = ref(JSON.parse(mydraftjson) || []);
        console.log(mydraft.value);
        let back = () => {
            router.back();
        }
        let todraft = (videoid: any) => {
            router.push({
                path: '/addvideo',
                query: {
                    videoid,
                    draftflag: 1,
                }
            })
        }
        return {
            back,
            mydraft,
            todraft
        }
    }
})
</script>
<template>
    <div>
        <div class="desbar">
            <span class="iconfont icon-xiangzuojiantou" @click="back"> </span>
            <h2>草稿箱</h2>
        </div>
        <div class="drafList" v-if="mydraft">
            <p v-if="mydraft.length == 0">暂无草稿哦~</p>
            <ul v-else>
                <li v-for="item in mydraft" @click="todraft(item.videoid)">
                    <div class="image">
                        <img :src="item.avator" alt="">
                        <div class="mask">

                        </div>
                    </div>
                    <div class="word">
                        <div class="title">
                            <p v-if="item.title">{{ item.title }}</p>
                            <span v-else>还没有填写标题</span>
                        </div>
                        <div class="des title">
                            <p v-if="item.des">{{ item.des }}</p>
                            <span v-else>还没有填写简介</span>
                        </div>
                    </div>
                </li>
            </ul>

        </div>
    </div>
</template>
<style lang="scss" scoped>
.desbar {
    display: flex;
    line-height: 44px;
    padding: 0 10px;
    position: sticky;
    z-index: 10;
    top: 0;

    span {
        font-size: 18px;
        font-weight: 600;
    }

    h2 {
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        font-size: 16px;

        // margin-left: 50px;
    }
}

.drafList {
    padding: 20px 15px;

    &>p {
        text-align: center;
        color: #a8a5a5;
    }

    ul {
        li {
            display: flex;
            margin-bottom: 10px;

            .image {
                position: relative;
                width: 50%;

                img {
                    // width: 100%;
                    // height: auto;
                    // border-radius: 10px;
                    width: 100%;
                    height: 112px;
                    border-radius: 10px;
                    object-fit: cover;
                    object-position: center;
                }

                .mask {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(0%, -50%);
                    color: #fff;
                    font-size: 12px;
                    width: 0;
                    height: 0;
                    border: 10px solid transparent;
                    border-left: 15px solid #fff;
                }
            }

            .word {
                margin-left: 15px;
                display: flex;
                flex-direction: column;
                justify-content: center;

                .title {
                    font-size: 14px;
                    margin-bottom: 10px;

                    p {
                        color: #000;
                    }

                    span {
                        color: #a8a5a5;
                    }
                }
            }
        }
    }
}
</style>